<template>
 <div class="navbaritem" @click='btnclick' >
   <div v-if="!isactive"><slot name="item-img"></slot></div> 
   <div v-else><slot name="item-img-active"></slot></div> 
  <div :style="activecoloring" ><slot name="item-text"></slot></div>
 </div>
</template>

<script>

export default {
  name:'tabbaritem',
  props: {
     path: String ,
     activecolor:{
       type:String,
       default:'green'
     }
    },
  
  data(){
    return{
      // isactive:true
    }
  },
  methods: {
     btnclick(){
       this.$router.push(this.path)
       
     }
  },
  computed: {
    isactive(){
   return  this.$route.path.indexOf(this.path) !==-1
    },
    activecoloring(){
     
      return this.activecolor? {color:this.activecolor}:{}
      
    }
  }
}
</script>

<style scoped>
 .navbaritem img{
   width: 29px;
   height: 29px;
   vertical-align: middle;  
 }
 .navbaritem {
   flex:1;
   margin-top: 5px;  
 }
 .navbaritem div{
   font-size: 16px;
  
 }
</style>